import { Button, Card,  Tag, Descriptions, Collapse  } from 'antd';
import { ProCard } from '@ant-design/pro-components';
import React, { useState, useRef, useEffect } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import type { RouteChildrenProps } from 'react-router';
import Basicinfo from './components/Basicinfo';
import Familyinfo from './components/Familyinfo';
import  './Center.less';
import { PageContainer } from '@ant-design/pro-layout';
import type { CollapseProps } from 'antd';
import {
  getusrBaseInfo,
}from '@/services/baseinfo'

const Center: React.FC<RouteChildrenProps> = () => {
  const [userInfo, setUserInfo] = useState(null); // 用于保存接口返回的用户基本信息
  const avatar= localStorage.getItem("avatar")//用户头像文件ID
  const { data: currentUser, loading } = useRequest(() => {//  获取用户信息
    return queryCurrent();
  });

  useEffect(() => {
    // 在组件加载时调用接口函数
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      // 调用接口函数并传递必要的参数
      const response = await getusrBaseInfo(null,null );

      // 处理返回的数据
      if (response && response.result) {
        setUserInfo(response.result); // 将接口返回的数据保存到状态中
      }
    } catch (error) {
      console.error('Error fetching user info:', error);
    }
  };
  if (userInfo === null || userInfo === undefined) {
    return <p>Loading...</p>;
  }

  // const items = [
  //   {
  //     key: '1',
  //     label: '个人基本信息填写',
  //     children: <Basicinfo />,
  //   },
  //   {
  //     key: '2',
  //     label: '家庭基本信息填写',
  //     children: <Familyinfo />,
  //   },
  // ];
  return (
    <PageContainer>
      <GridContent>

        <Card bordered={false} style={{ marginBottom: 24 }} loading={loading}>
            <div>
            <ProCard>
              <ProCard colSpan="9%">
                <div className='avatarHolder'>
                  {/* 到时候拼接文件头像ID */}
                  <img
                    alt=""
                    src={"/api/freshSystem/downloadFile/"+localStorage.getItem("avatar")} />
                  <div>{currentUser?.signature}</div>
                </div>
              </ProCard>
              <ProCard className="user-information">
                <Descriptions  bordered >
                  <Descriptions.Item label="姓名：" className="bold-and-large">{userInfo.stuName}</Descriptions.Item>
                  <Descriptions.Item label="住宿院区：" className="bold-and-large">{userInfo.dormitoryCampus}</Descriptions.Item>
                  <Descriptions.Item label="辅导员" className="bold-and-large">{`${userInfo.instructorName}  ${userInfo.instructorNumber}`}</Descriptions.Item>

                  <Descriptions.Item label="学号：" className="bold-and-large">{userInfo.stuCode}</Descriptions.Item>
                  <Descriptions.Item label="宿舍楼号：" className="bold-and-large">{userInfo.dormitoryBuilding}</Descriptions.Item>
                  <Descriptions.Item label="班导师：" className="bold-and-large">{`${userInfo.classAdvisor}  ${userInfo.advisorNumber}`}</Descriptions.Item>

                  <Descriptions.Item label="专业班级：" className="bold-and-large">{userInfo.classLabel}</Descriptions.Item>
                  <Descriptions.Item label="宿舍号：" className="bold-and-large">{userInfo.dormitoryRoom}</Descriptions.Item>
                  <Descriptions.Item className="bold-and-large"></Descriptions.Item>
                </Descriptions>
              </ProCard>
            </ProCard>
            </div>
        </Card>

        <Card>
          <Collapse accordion defaultActiveKey={['1']}>

              <Collapse.Panel header="个人基本信息填写" key="1">
                <Basicinfo />
              </Collapse.Panel>



              <Collapse.Panel header="家庭基本信息填写" key="2">
                <Familyinfo />
              </Collapse.Panel>

          </Collapse>
        </Card>
      </GridContent>
    </PageContainer>
  );
};
export default Center;


